﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>PopU 演示文档 - 基于Jquery的弹出层组件</title>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="JqPopU.js" type="text/javascript"></script>
    <link href="JqPopU.css" rel="stylesheet" type="text/css" />
    
	<script>
		
		var str = $("<div id='bb'>绑定了事件的内容</div>");
		str.click(function(){alert()});
		
		var PopU_Tips = new PopU();
		
		function Change(i)
		{
			$("#Change"+(i-1)).hide();
			$("#Change"+(i+1)).hide();
			$("#Change"+(i-2)).hide();
			$("#Change"+(i+2)).hide();
			$("#Change"+i).show();
		}
		function run(obj)
		{
		    try {
		        eval(obj);
		    } catch(e) {
		        alert("你修改后的JS代码有错误!无法运行")
		    }
		}
	</script>
	
	<style>
	    body {padding:50px;}
	    .head {float:left;margin:10px 0 0 0;width:872px;padding:5px 15px;background:#3299C6;line-height:30px;color:#E6FBFF;font-weight:bold;font-size:14px;}
	    .head input {float:right;width:100px;padding:0px;margin:0px;}
	    .head span {float:left;}
		.code {float:left;width:902px;}
		.code textarea {width:880px;height:64px;float:left;margin:0px;padding:10px;display:block;overflow-y:scroll;border:1px solid #3299C6;}
	    .i1 {float:left;margin:5px 0 0 0;width:870px;padding:2px 15px;background:#E0ECF5;line-height:24px;font-weight:bold;font-size:12px;border:1px solid #B9CAE1;}
	    .i2 {float:left;margin:5px 0 0 0;width:870px;padding:2px 15px;line-height:18px;font-size:12px;border:1px solid #B9CAE1;}
		.i1 div {float:left;width:140px;}
		.li1 {float:right;width:280px !important;color:#226371;}
		.li2 {float:right;width:300px !important;}
		.li3 {float:right;width:150px !important;}
	</style>
</head>
<body>
	<div>
		<strong>PopU 演示文档 - 基于Jquery的弹出层组件</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:Change(0)">演示代码</a>&nbsp;|&nbsp;<a href="javascript:Change(1)">方法说明</a>&nbsp;|&nbsp;<a href="javascript:Change(2)">开发日志</a>
		<br /><br />
		<div id="Change0">
			<div class="head">
			    <span>弹出一个对象型窗口<font color="#FFCC66">（以下演示代码均可修改并动态执行）</font></span><input type="button" onclick="run($('#code1').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code1">var PopU1 = new PopU();
PopU1.initPop( { type: 'string', title:'建议提交', contents: '测试数据', w: 615,  onOverlay:0, closeIsHide:true} );
PopU1.showPop();</textarea>
            </div>
			<div class="head">
			    <span>弹出多窗口而且不冲突</span><input type="button" onclick="run($('#code2').val())" value="给我一个窗口" />
			</div>
			<div class="code"><textarea id="code2">var PopU1 = new PopU();
PopU1.initPop( { type: 'string',title:'窗口编号'+Math.random(), contents: '这是一个独立的窗口', w: 450, h: 110, showOverlay:false, onYesFn:function(){},onNoFn:function(){}  } );
PopU1.showPop();</textarea>
            </div>
			<div class="head">
			    <span>弹出一个窗口，粘合在指定的对象上</span><input type="button" onclick="PopU_Tips.showPop();" value="再显示" /><input type="button" onclick="run($('#code8').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code8">
PopU_Tips.initPop( { type: 'jquery', contents: str, w: 350, h: 110, showOverlay:false, onYesFn:function(){},closeIsHide:true,onNoFn:function(){},tipsAtObj:$('#code8'),offsetY:15  } );
PopU_Tips.showPop();</textarea>
            </div>
			<div class="head">
			    <span>弹出一个Alert型窗口</span><input type="button" onclick="run($('#code3').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code3">var PopU1 = new PopU();
PopU1.alert( { type: 'string',title:'提示信息', contents: '这是Alert窗口',onOverlay:0, onYesFn:function(){alert('确定')}  } );</textarea>
            </div>
			<div class="head">
			    <span>弹出一个精简型Alert型窗口</span><input type="button" onclick="run($('#code4').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code4">var PopU1 = new PopU();
PopU1.alert( { "type": "string", "contents": "这是Alert窗口","onOverlay":0 } );</textarea>
            </div>
			<div class="head">
			    <span>弹出一个Comfirm型窗口</span><input type="button" onclick="run($('#code5').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code5">var PopU1 = new PopU();
PopU1.confirm( { type: 'string',title:'选择确认窗口', contents: '你知道这是Confirm窗口吗？', onOverlay:0, onYesFn:function(){alert('你知道了')}, onNoFn:function(){alert('你竟然不知道!')}  } );</textarea>
            </div>
			<div class="head">
			    <span>弹出一个Iframe窗口</span><input type="button" onclick="run($('#code6').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code6">var PopU1 = new PopU();
PopU1.initPop( { type: 'iframe', contents: 'http://www.baidu.com', w: 450, h: 200, showOverlay:false, onYesFn:function(){},onNoFn:function(){}  } );
PopU1.showPop();</textarea>
            </div>
			<div class="head">
			    <span>弹出一个Jquery对象内容，会保持传入对象的事件完整性</span><input type="button" onclick="run($('#code7').val())" value="执行这段代码" />
			</div>
			<div class="code"><textarea id="code7">var PopU1 = new PopU();
PopU1.initPop( { type: 'jquery', contents: str, w: 450, h: 110, showOverlay:false, onYesFn:function(){},onNoFn:function(){}  } );
PopU1.showPop();</textarea>
            </div>
		</div>
		<div id="Change1" style="display:none;">
			<div class="code">
            	<div class="head">
                	PopU 对象的方法介绍
                </div>
           	  <div class="i1">
                	.alert(param)
              </div>
                <div class="i2">
                定义并显示一个提示型对话框。<br />
                ·该窗口不会有取消按钮，也就没有点击取消按钮的回调函数onNoFn参数。<br />
                ·该窗口可以有确认按钮，有则必须点击按钮关闭窗口 无确认按钮则点击页面任何部位均关闭窗口。<br />
                </div>
            	<div class="i1">
                	.confirm(param)
                </div>
                <div class="i2">
                定义并显示一个确认类型对话框。<br />
                ·该窗口强制有确认和取消按钮，可以传入确认和取消的回调函数。<br />
                ·该窗口必须点击确认或取消方可关闭。<br />
                </div>
            	<div class="i1">
                	.initPop(param)
                </div>
                <div class="i2">
                定义一个基本弹窗，即这个弹窗能自由定义功能和风格。<br />
                ·该窗口强制有确认和取消按钮，可以传入确认和取消的回调函数。<br />
                ·该窗口必须点击确认或取消方可关闭。<br />
                </div>
            	<div class="i1">
                	.showPop()
                </div>
                <div class="i2">
                显示定义好的基本弹窗。<br />
                ·该窗口强制有确认和取消按钮，可以传入确认和取消的回调函数。<br />
                ·该窗口必须点击确认或取消方可关闭。<br />
                </div>
            	<div class="i1">
                	.close()
                </div>
                <div class="i2">
                关闭显示的弹窗。<br />
                ·此方法可以用于以上任意一种订制或基本弹窗。<br />
                ·可以通过closeIsHide参数来设置.close()方法是移除弹窗对象或是隐藏弹窗 只对initPop()的基本弹窗有效。<br />
                </div>
            	<div class="head">
                	PopU 参数说明
                </div>
                <div class="i1">
                    <div>ShowYesBtn</div>
                    <div class="li1">是否显示确认按钮</div>
                    <div class="li2">范围:{true/false}</div>
                    <div class="li3">默认:条件判断</div>
                </div>
                <div class="i2">
                ·条件1：如果有传递onYesFn参数，则强制为true。<br />
                ·条件2：如果是.confirm()类型的弹窗，则强制为true。<br />
                ·条件3：如果外部不指定，默认为false。<br />
                </div>
                <div class="i1">
                    <div>ShowNoBtn</div>
                    <div class="li1">是否显示取消按钮</div>
                    <div class="li2">范围:{true/false}</div>
                    <div class="li3">默认:条件判断</div>
                </div>
                <div class="i2">
                ·条件1：如果有传递onNoFn参数，则强制为true。<br />
                ·条件2：如果是.confirm()类型的弹窗，则强制为true。<br />
                ·条件3：如果外部不指定，默认为false。<br />
                </div>
                <div class="i1">
                    <div>onYesFn</div>
                    <div class="li1">点击确认按钮时回调方法</div>
                    <div class="li2">范围:function(){}</div>
                    <div class="li3">默认:function(){}</div>
                </div>
                <div class="i1">
                    <div>onNoFn</div>
                    <div class="li1">点击取消按钮时回调方法</div>
                    <div class="li2">范围:function(){}</div>
                    <div class="li3">默认:function(){}</div>
                </div>
                <div class="i1">
                    <div>onShowFn</div>
                    <div class="li1">显示完毕时回调方法</div>
                    <div class="li2">范围:function(){}</div>
                    <div class="li3">默认:function(){}</div>
                </div>
                <div class="i1">
                    <div>onLoadFn</div>
                    <div class="li1">定义时回调方法(暂不可用)</div>
                    <div class="li2">范围:function(){}</div>
                    <div class="li3">默认:function(){}</div>
                </div>
                <div class="i1">
                    <div>onHideFn</div>
                    <div class="li1">关闭窗口时回调方法</div>
                    <div class="li2">范围:function(){}</div>
                    <div class="li3">默认:function(){}</div>
                </div>
                <div class="i1">
                    <div>w</div>
                    <div class="li1">窗体宽度</div>
                    <div class="li2">范围:{任意正整数}</div>
                    <div class="li3">默认:240</div>
                </div>
                <div class="i1">
                    <div>h</div>
                    <div class="li1">窗体高度</div>
                    <div class="li2">范围:{任意正整数}</div>
                    <div class="li3">默认:0(自适应)</div>
                </div>
                <div class="i1">
                    <div>showOverlay</div>
                    <div class="li1">是否显示遮罩层(即弹窗之外不可用)</div>
                    <div class="li2">范围:{true/false}</div>
                    <div class="li3">默认:true</div>
                </div>
                <div class="i1">
                    <div>overlayParam</div>
                    <div class="li1">遮罩层透明度</div>
                    <div class="li2">范围:{0-100}</div>
                    <div class="li3">默认:0</div>
                </div>
                <div class="i1">
                    <div>onOverlay</div>
                    <div class="li1">遮罩层的鼠标事件类型</div>
                    <div class="li2">范围:{0,1,2}</div>
                    <div class="li3">默认:0</div>
                </div>
                <div class="i2">
                ·0:点击遮罩层时窗口闪烁<br />
                ·1:点击遮罩层时窗口关闭<br />
                ·2:mouseover到遮罩层时窗口关闭(即鼠标离开弹窗时弹窗关闭)<br />
                </div>
                <div class="i1">
                    <div>autoClose</div>
                    <div class="li1">是否自动关闭弹窗</div>
                    <div class="li2">范围:{true/false}</div>
                    <div class="li3">默认:false</div>
                </div>
                <div class="i1">
                    <div>closeTime</div>
                    <div class="li1">弹窗自动关闭时间</div>
                    <div class="li2">范围:{任意正整数}</div>
                    <div class="li3">默认:2000(毫秒)</div>
                </div>
                <div class="i1">
                    <div>closeIsHide</div>
                    <div class="li1">关闭窗口时是否只是隐藏窗口</div>
                    <div class="li2">范围:{true/false}</div>
                    <div class="li3">默认:false</div>
                </div>
                <div class="i1">
                    <div>tipsAtObj</div>
                    <div class="li1">弹窗显示时跟随某个页面对象</div>
                    <div class="li2">范围:{jquery,Element}</div>
                    <div class="li3">默认:false</div>
                </div>
                <div class="i1">
                    <div>offsetX</div>
                    <div class="li1">相对跟随对象的X方向偏移量</div>
                    <div class="li2">范围:{任意正整数}</div>
                    <div class="li3">默认:0</div>
                </div>
                <div class="i1">
                    <div>offsetY</div>
                    <div class="li1">相对跟随对象的Y方向偏移量</div>
                    <div class="li2">范围:{任意正整数}</div>
                    <div class="li3">默认:0</div>
                </div>
                <div class="i1">
                    <div>title</div>
                    <div class="li1">弹窗的标题栏内容</div>
                    <div class="li2">范围:{string}</div>
                    <div class="li3">默认:''</div>
                </div>
                <div class="i1">
                    <div>type</div>
                    <div class="li1">弹窗正文传递内容的类型</div>
                    <div class="li2">范围:{'string','jquery','iframe','ajax'}</div>
                    <div class="li3">默认:'string'</div>
                </div>
                <div class="i2">
                ·'string'：即传递一段字符串，普通的弹窗信息显示传递。<br />
                ·'jquery'：表示要传进一个jquery对象，弹窗时会显示这个对象的内容，并保持这个对象的相关事件。<br />
                ·'iframe'：表示要传递进来一个iframe，弹窗时会显示一个嵌套的iframe页面<br />
                ·'ajax'：表示要传进来一个http地址，弹窗时会请求这个地址并显示其异步返回内容。<br />
                </div>
                <div class="i1">
                    <div>contents</div>
                    <div class="li1">弹窗的正文内容</div>
                    <div class="li2">范围:{string,jquery}</div>
                    <div class="li3">默认:''</div>
                </div>
                <div class="i2">
                ·也可以传递iframe或ajax请求的http地址<br />
                </div>
                <div class="i1">
                    <div>btnList</div>
                    <div class="li1">弹窗右上角显示的按钮列表</div>
                    <div class="li2">范围:{Array()}</div>
                    <div class="li3">默认:Array()</div>
                </div>
                <div class="i2">
                ·当调用基本弹窗initPop()时，将会默认提供一个关闭窗口的按钮。<br />
                ·这个Array()可以push若干个jquery或Element对象，这个对象是一个16×16的按钮图标，同时绑定了click()点击事件。<br />
                </div>
                
			</div>
		</div>
		<div id="Change2" style="display:none;">
		</div>
		<br /><br />
		<div class="code"><br /><br />
		* PopU <br />
		* Simple Yeung<br /><br />
		</div>
	</div>
</body>
</html>